<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>车队管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="车队类型">
              <a-select v-model="searchForm.custTypeLike" class="selectWidth">
                <a-select-option :value="TEAM">全部</a-select-option>
                <a-select-option :value="SELF_TEAM">自营</a-select-option>
                <a-select-option :value="EXPATRIATE_TEAM">外派</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="车队名称">
              <a-input v-model="searchForm.nameLike" />
            </a-form-item>
            <a-form-item label="车队联系人">
              <a-input v-model="searchForm.linkManLike" />
            </a-form-item>
            <a-form-item label="结算类型">
              <a-select v-model="searchForm.settlementType" class="selectWidth">
                <a-select-option value>全部</a-select-option>
                <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="handleCreate">+ 创建车队</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="exportExcel">导出excel</a-button>
            </a-form-item>
          </a-form>

          <a-table
            :columns="columns"
            :data-source="tableData"
            :loading="loading"
            class="tableMargin"
            :pagination="pagination"
            rowKey="id"
          >
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
            <template slot="operation" slot-scope="text, record">
              <a @click="editIt(record.id, record.custType)">编辑</a>
              <a @click="viewIt(record.id, record.custType)">查看</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { mixin } from '@/common/settlement2'
import { commonExport } from '@/api/request'
import { querySettlementUnitList } from '@/api'

const TEAM = 'TEAM'
const SELF_TEAM = 'SELF_TEAM'
const EXPATRIATE_TEAM = 'EXPATRIATE_TEAM'

export default {
  mixins: [mixin],
  data () {
    return {
      TEAM,
      SELF_TEAM,
      EXPATRIATE_TEAM,
      searchForm: {
        custTypeLike: TEAM,
        nameLike: '',
        status: '',
        linkManLike: '',
        settlementType: ''
      },
      columns: [{
        title: '序号',
        width: 60,
        scopedSlots: { customRender: 'rn' }
      }, {
        title: '车队类型',
        dataIndex: 'custType',
        customRender: (text, row, index) => {
          if (~text.indexOf(SELF_TEAM)) {
            return '自营'
          } else if (~text.indexOf(EXPATRIATE_TEAM)) {
            return '外派'
          }
        },
        _needName: true
      }, {
        title: '车队名称',
        dataIndex: 'name',
        ellipsis: true
      }, {
        title: '车队联系人',
        dataIndex: 'linkMan1',
        ellipsis: true
      }, {
        title: '联系电话',
        dataIndex: 'linkManPhone1',
        ellipsis: true
      }, {
        title: '结算类型',
        dataIndex: 'settlementType',
        customRender: (text, record, index) => {
          return this.checkSettlementTypeName(text)
        },
        _needName: true
      }, {
        title: '操作',
        width: 100,
        scopedSlots: { customRender: 'operation' }
      }],
      tableData: [],
      loading: false,
      pagination: {},
      pageNum: 1,
      pageSize: 10
    }
  },
  created () {

  },
  methods: {
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      querySettlementUnitList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    handleCreate () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.$router.push('fleetManagement/fleetOperate')
    },
    exportExcel () {
      commonExport('/customer/exportSettlementUnitList', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    editIt (id, custType) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      this.$router.push({ path: 'fleetManagement/fleetOperate', query: { id, custType: ~custType.indexOf(SELF_TEAM) ? SELF_TEAM : EXPATRIATE_TEAM } })
    },
    viewIt (id, custType) {
      this.$router.push({ path: `fleetManagement/${id}`, query: { custType: ~custType.indexOf(SELF_TEAM) ? SELF_TEAM : EXPATRIATE_TEAM } })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.handleSubmit()
    })
  }
}
</script>

<style lang="less" scoped>
</style>
